$(function () {
    // 菜单导航特效
    $('.cate-content').on('mouseenter', '.nav-li', function () {
        $('.cat2').show()
 
        let index = $(this).index()
        $('.cat2>div').hide()
        $('.cat2>div').eq(index).show()
    })
    $('.cate-content').on('mouseleave', function () {
        $('.cat2').hide()
        $('.cat2>div').hide()
    })

    // 菜单导航接口数据
    let icons = [
        'icon-canju',
        'icon-meituan',
        'icon-jiudian',
        'icon-jiudian',
        'icon-dianying-',
        'icon-feiji',
        'icon-maikefeng',
        'icon-icon',
        'icon-chuitoufa',
        'icon-qinzi2',
        'icon-gangling',
        'icon-pinleitubiao_jiazhuangjiancai',
        'icon-xuexi',
        'icon-zhuanshi',
        'icon-tubiao_-',
        'icon-jiubajiulang',
    ]

    //打开页面请求
    $.get('/api/cate/tree.jsp',{},res=>{
        console.log(res.data);
        //一级
        let html=''
        $.each(res.data,(i,item)=>{
        let url = item.url || `./waimai.html?cat_id=${item.cat_id}`
  
          html+=`
          <li class="nav-li">
                <i class="iconfont ${icons[i]}"></i>
                <span class="nav-text-wrapper"><span>
                    <a href="${url}" class="link nav-text" >${item.cat_name}</a>
                    ${item.cat_name==='外卖'? '<span class="nav-promotion">HOT</span>':''}
                <i class="nav-right-arrow"></i>
          </li>
          `
        })
  
        $('.cat1 ul').html(html);
  
        // 二级/三级
        $('.cat2').text('') //清空
        let oneHtml=''
        $.each(res.data,(i,item)=>{
          let twoHtml=''
          $.each(item.children,(twoi,twoitem)=>{
            //三级 二的子
            let threeHtml = ''
            $.each(twoitem.children,(threei,threeitem)=>{
              // let url=
              threeHtml+=`
              <a href="javascript:;" class="link detail-text" >${threeitem.cat_name}</a>
              `
            })
            let url = twoitem.url || `./waimai.html?cat_id=${twoitem.cat_id}`
            twoHtml+=`
            <!-- 二级 content 每个二级盒子里面有n个二级内容 -->
                <div class="detail-area">
                  <div class="detail-title-wrapper clearfix">
                    <h2>
                      <a href="${url}" class="link detail-title" >${twoitem.cat_name}</a>
                    </h2>
                    <a href="${url}" class="link detail-more" >更多<i class="detail-right-arrow"></i></a>
                  </div>
  
                  <!-- 三级 -->
                  <div class="detail-content">
                    ${threeHtml}
                  </div>
                  <!-- 三级 -->
                </div>
                <!-- 二级 content 每个二级盒子里面有n个二级内容 -->
            `
          })
  
  
          let oneHtml=`
          <!-- 二级 box 每个一级仅一个二级盒子  -->
              <div class="category-nav-detail">
              ${twoHtml}
              <!--  ${twoHtml || '<img src="./assets/imgs/cate404.webp" />'}-->
              </div>
              <!-- 二级 box 每个一级仅一个二级盒子 -->
          `
  
          $('.cat2').append(oneHtml); //追加
  
        })
      },'json')

})
